<template>
	<view class="form-item">
		<view class="msg-box">
			<text>身高</text>
			<input placeholder="请输入" v-model="loginHealth.loginHealth.height" />
			<text style="color: #333;">cm</text>
		</view>
		<view class="msg-box">
			<text>体重</text>
			<input placeholder="请输入" v-model="loginHealth.loginHealth.weight" />
			<text style="color: #333;">kg</text>
		</view>
		
		<view class="msg-box">
			<text>过敏史</text>
			<radio-group @change="onAllergy">
				<label>
					<radio value="" :checked="true" color="#007aff" style="transform: scale(0.7)" />
					无
				</label>
				<label style="margin-left: 50rpx;">
					<radio value="有" color="#007aff" style="transform: scale(0.7)" />
					有
					
				</label>
				
				<!-- <textarea v-if="value=='有'" placeholder="请填写过敏药物"></textarea> -->
			</radio-group>
			
			  <!-- 条件渲染的输入框 -->
			    <view v-if="showInput">
			      <input 
			        v-model="inputValue" 
			        placeholder="请输入内容"
			        class="input-box"
			      />
			    </view>
			
		</view>

		<view class="msg-box">
			<text>就诊史</text>
			<radio-group @change="onChange">
				<label>
					<radio value="" :checked="true" color="#007aff" style="transform: scale(0.7)" />
					无
				</label>
				<label style="margin-left: 50rpx;">
					<radio value="有" color="#007aff" style="transform: scale(0.7)" />
					有
					<!-- <textarea v-show="value=='有'" placeholder="请填写处方/检查/手术等就诊信息"></textarea> -->
					
				</label>
			</radio-group>
		</view>
		
		<slot name="btn"></slot>
	</view>
</template>
<script setup>
	import {
		computed,
		ref
	} from 'vue';
	// const height = ref('')
	// const weight = ref('')
	// // 过敏史
	// const allergy = ref('')

	// // 就诊史按钮
	// const outpatients = ref('')
	const loginHealth = defineProps(['loginHealth'])

	// const healthMsg = computed(() => ({
	// 	height: height.value,
	// 	weight: weight.value,
	// 	allergy: allergy.value,
	// 	outpatients: outpatients.value
	// }))
	// console.log(22, healthMsg.value);


	// defineExpose({
	// 	healthMsg
	// })

	// 过敏史
	function onAllergy(e) {
		loginHealth.loginHealth.allergy = e.detail.value
		// console.log("过", allergy.value);
	}

	function onChange(e) {
		loginHealth.loginHealth.outpatients = e.detail.value
		// console.log("就诊", outpatients.value);
	}
</script>

<style lang="scss" scoped>
	.commitBtn {
		height: 160rpx;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		padding: 0 40rpx;

		button {
			width: 100%;
			height: 88rpx;
			background-color: #2984f8;
			font-size: 16px;
			color: #fff;
			line-height: 88rpx;
			text-align: center;

		}

		// button:first-child {
		// 	background-color: #fff;
		// 	color: #2984f8;
		// }

	}

	.form-item {
		background: #fff;
		padding: 0 0rpx 0rpx 40rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.msg-box {

		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;

		// justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;

		text {
			margin-right: 30rpx;
			width: 150rpx;
			// font-size: 14px;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;
			color: #999;
		}

		input {
			width: 100rpx;
			font-size: 14px;
		}
	}
</style>